<script setup lang="ts">
import {onMounted, ref} from 'vue';
import GlobalHeader from "../../components/GlobalHeader.vue";
import QuestionList from "./components/QuestionList.vue";
import {useRoute, useRouter} from 'vue-router';
import {Aim, ArrowLeftBold, CaretRight} from "@element-plus/icons-vue";
import {SetControllerService, SetDetailVO} from "../../../generated";

const router = useRouter();
let route = useRoute();
const showTags = ref(false);

const goBack = () => {
  router.back();
};

const set = ref<SetDetailVO>({
  id: '',
  groupList: [],  // 初始化为空数组
  tagList: [],
  title: '',
  target: '',
  description: ''
})

onMounted(async () => {
  let res = await SetControllerService.getSetDetailUsingGet(route.params.id as string);
  if (res.code === 0 && res.data) {
    set.value = res.data
  }
})

const handleEdit = () => {
  router.push('/update/set/' + route.params.id)
}
</script>

<template>
  <GlobalHeader/>
  <div class="study-header">
    <div class="content">
      <div class="main">
        <div class="left">
          <div class="back-button" @click="goBack">
            <el-icon>
              <ArrowLeftBold/>
            </el-icon>
          </div>
          <img src="https://pic.leetcode.cn/1690881907-DNkYrg-Dynamic%20Programming%20%F0%9F%91%8C@3-240x240.png"
               alt="学习计划"
               class="plan-image"/>
        </div>
        <div class="middle">
          <div class="breadcrumb">
            <el-icon>
              <Aim/>
            </el-icon>
            {{ set.target }}
          </div>
          <h1 class="submission-title">{{ set.title }}</h1>
          <button class="start-button">
            <el-icon>
              <CaretRight/>
            </el-icon>
            开始
          </button>
        </div>
        <div class="right">
          <el-button type="primary" class="edit-button" @click="handleEdit">
            编辑
          </el-button>
        </div>
      </div>
    </div>
  </div>
  <div class="study-main">
    <el-checkbox v-model="showTags" class="show-tags-toggle">显示标签</el-checkbox>
    <QuestionList
        v-for="section in set.groupList"
        :key="section.title"
        :title="section.title"
        :questions="section.questionList"
        :show-tags="showTags"
    />
  </div>

</template>

<style scoped>
.content {
  max-width: 1000px;
  margin: 0 auto;
}

.study-header {
  position: relative;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
  linear-gradient(to left, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
  radial-gradient(at 50% 0%, rgb(246 255 249) 0%, rgb(246 255 249) 30%, white 70%);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  background-position: center center;
  padding-top: 24px;
}

.study-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 24px 50px;
}

.study-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, white);
  pointer-events: none;
}

.back-button {
  position: absolute;
  left: -20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background-color: #f5f5f5;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.back-button:hover {
  background-color: #e8e8e8;
}

.back-button .el-icon {
  font-size: 18px;
}

.main {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.left {
  flex: 0 0 240px;
  position: relative;
}

.middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 240px; /* 与图片高度保持一致 */
}

.right {
  flex: 0 0 100px;
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}

.plan-image {
  width: 100%;
}

.show-tags-toggle {
  float: right;
}

.breadcrumb {
  color: #666;
  font-size: 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.submission-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 24px;
}

.start-button {
  width: 100px;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #1a1a1a;
  color: white;
  padding: 8px 24px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.start-button:hover {
  background-color: #333;
}

.edit-button {
  font-size: 14px;
}
</style>